// hooks只能给函数组件用的

// hooks是16.8版本才新增的
// hooks可以增强函数组件的功能,让函数组件也能拥有像类组件一样的state和生命周期等
// 自定义hooks(类似于vue的组合式api)，相同的功能的代码进行聚合，封装，复用。
// hooks可以在增强组件的功能的同时，不会增加组件层级(相比于高阶组件)

// hooks一般约定用use开头
// 所有的hooks都要在函数组件的顶层调用

import React, { useState } from "react";
// useState允许我们在函数组件定义state
// useState可以接受一个默认值作为参数
// 返回一个数组，包含了变量和改变变量的方法

// 改变数据的方法是异步的，但是没有第二个参数
// 如果想拿到改变以后的数据，就需要和useEffect配合使用
const App = () => {
  const [count, setCount] = useState(5);
  const change = () => {
    setCount(50);
  };
  const add = (n) => () => {
    setCount((v) => v + n);
    // console.log(count);
  };

  const [name, setName] = useState("tom");

  return (
    <>
      <h2>useState</h2>
      <div>count: {count}</div>
      <button onClick={change}>to 50</button>
      <button onClick={add(3)}>count++</button>

      <hr />

      <div>name: {name}</div>
      <button onClick={() => setName("jerry")}>change name</button>
    </>
  );
};

export default App;
